<template>
    <div>
        <div class="crumbs">
            <!-- <el-breadcrumb separator="/">
                <el-breadcrumb-item> -->
            <!-- <div class="indexTitle">项目管理</div> -->
            <div class="contentbox">
                <div class="contentsize">楼幢信息录入</div>
                <div>
                    <el-button type="primary" @click="submitForm('ruleForm')" :disabled="fjlrshow">保存</el-button>
                    <el-button type="primary" @click="addlistval = true" v-show="fjlrshow">房间录入</el-button>
                    <el-button @click="cacelsubmitForm('ruleForm')">返回</el-button>
                </div>
            </div>
            <!-- </el-breadcrumb-item>
            </el-breadcrumb> -->
        </div>
        <div class="container">
            <!-- <div class="addtitle">新建</div> -->
            <el-form ref="form" :model="form" label-width="120px" :inline="true" label-position="top" :rules="rules">
                <el-form-item label="区属名称:" style="width: 30%" prop="qs">
                    <el-select v-model="form.qs" placeholder="请选择区属名称" clearable style="width: 100%">
                        <el-option v-for="item in qslist" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="房屋地址:" style="width: 30%" prop="fwdz">
                    <el-input v-model="form.fwdz" placeholder="请输入房屋地址" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="楼号:" style="width: 30%" prop="lh">
                    <el-input v-model="form.lh" placeholder="请输入楼号" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="房屋结构:" style="width: 30%" prop="fwjg">
                    <el-select v-model="form.fwjg" placeholder="请选择房屋结构" clearable style="width: 100%">
                        <el-option v-for="item in fwjglist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="建筑年代:" style="width: 30%" prop="jznd">
                    <el-input v-model="form.jznd" placeholder="请输入建筑年代" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="产别:" style="width: 30%" prop="cb">
                    <el-select v-model="form.cb" placeholder="请选择产别类型" clearable style="width: 100%">
                        <el-option v-for="item in cblist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                    <!-- <el-input v-model="form.cb" placeholder="请输入产别" class="search-input"></el-input> -->
                </el-form-item>
                <el-form-item label="权证类型:" style="width: 30%" prop="qzlx">
                    <!-- <el-select v-model="form.qzlx" placeholder="请选择权证类型" clearable style="width: 100%">
                        <el-option v-for="item in qzlxlist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select> -->
                    <el-input v-model="form.qzlx" placeholder="请输入权证类型" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="建筑面积:" style="width: 30%" prop="jzmj">
                    <el-input v-model="form.jzmj" placeholder="请输入建筑面积" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="房屋性质:" style="width: 30%" prop="fwyt">
                    <el-select v-model="form.fwyt" placeholder="请选择房屋性质" clearable style="width: 100%">
                        <el-option v-for="item in fwytlist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                    <!-- <el-input v-model="form.fwyt" placeholder="请输入房屋性质" class="search-input"></el-input> -->
                </el-form-item>
                <el-form-item label="证书编号:" style="width: 30%" prop="zsbh">
                    <el-input v-model="form.zsbh" placeholder="请输入证书编号" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="计租面积:" style="width: 30%" prop="jzmj">
                    <el-input v-model="form.jizumj" placeholder="请输入计租面积" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="产权单位:" style="width: 30%" prop="cqdw">
                    <!-- <el-input v-model="form.cqdw" placeholder="请输入产权单位" class="search-input"></el-input> -->
                    <el-select v-model="form.cqdw" placeholder="请选择房屋性质" clearable style="width: 100%">
                        <el-option v-for="item in cqdwlist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发证日期:" style="width: 30%" prop="fzrq">
                    <el-date-picker type="date" placeholder="选择发证日期" v-model="form.fzrq" style="width: 100%"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="土地使用权面积:" style="width: 30%" prop="tdsyqmj">
                    <el-input v-model="form.tdsyqmj" placeholder="请输入土地使用权面积" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="总楼层:" style="width: 30%" prop="zlc">
                    <el-input v-model="form.zlc" placeholder="请输入总楼层" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="地上层数:" style="width: 30%" prop="dscs">
                    <el-input v-model="form.dscs" placeholder="请输入地上层数" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="土地使用权类型:" style="width: 30%" prop="tdsyqlx">
                    <!-- <el-select v-model="form.tdsyqlx" placeholder="请选择土地使用权类型" clearable style="width: 100%">
                        <el-option v-for="item in tdsyqlxlist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select> -->
                    <el-input v-model="form.tdsyqlx" placeholder="请输入土地使用权类型" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="风貌建筑:" style="width: 30%" prop="fmjz" v-if="type=='2'">
                    <el-select v-model="form.fmjz" placeholder="请选择是否为风貌建筑" clearable style="width: 100%">
                        <el-option v-for="item in sflist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="小洋楼招商:" style="width: 30%" prop="zsxyl" v-if="type=='2'">
                    <el-select v-model="form.zsxyl" placeholder="请选择是否为小洋楼招商" clearable style="width: 100%">
                        <el-option v-for="item in sflist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="地下层数:" style="width: 30%" prop="dxcs">
                    <el-input v-model="form.dxcs" placeholder="请输入地下层数" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="原值:" style="width: 30%" prop="yz">
                    <el-input v-model="form.yz" placeholder="请输入原值" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="建档日期:" style="width: 30%" prop="jdrq">
                    <el-date-picker type="date" placeholder="选择建档日期" v-model="form.jdrq" style="width: 100%"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="建筑形式:" style="width: 30%" prop="jzxs">
                    <el-select v-model="form.jzxs" placeholder="请选择建筑形式" clearable style="width: 100%">
                        <el-option v-for="item in jzxslist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="档案编号:" style="width: 30%" prop="dabh">
                    <el-input v-model="form.dabh" placeholder="请输入档案编号" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="备注:" style="width: 100%" prop="note">
                    <el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入备注" v-model="form.note">
                    </el-input>
                </el-form-item>
                <!-- 是否支持多文进上传 multiple -->
                <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'" :on-remove="handleRemoves"
                    :before-remove="beforeRemoves" multiple :on-success="handelfilesuccess" :headers="myHeaders"
                    :file-list="filefileList">
                    <div class="unloadTitle">附件</div>
                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                </el-upload>
                <!-- <div class="buttonCenter">
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button @click="cacelsubmitForm('ruleForm')">取消</el-button>
                </div> -->
            </el-form>
        </div>
        <!-- 添加房间 -->
        <el-dialog title="房间录入" :visible.sync="addlistval" :modal-append-to-body="false" center width="80%">
            <div style="height: 400px;overflow-y:auto;overflow-x:hidden;">
                <el-form ref="form" :model="fjform" label-width="120px" :inline="true" label-position="top" :rules="rules">
                    <el-form-item label="区属名称:" style="width: 30%" prop="qs">
                        <el-select v-model="fjform.qs" placeholder="请选择区属名称" clearable style="width: 100%">
                            <el-option v-for="item in qslist" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="房屋地址:" style="width: 30%" prop="fwdz">
                        <el-input v-model="fjform.fwdz" placeholder="请输入房屋地址" class="search-input"></el-input>
                    </el-form-item>
                    <el-form-item label="产别:" style="width: 30%" prop="cb">
                        <el-select v-model="fjform.cb" placeholder="请选择产别类型" clearable style="width: 100%">
                            <el-option v-for="item in cblist" :key="item.code" :label="item.name" :value="item.code">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="权证类型:" style="width: 30%" prop="qzlx">
                        <el-select v-model="fjform.qzlx" placeholder="请选择权证类型" clearable style="width: 100%">
                            <el-option v-for="item in qzlxlist" :key="item.code" :label="item.name" :value="item.code">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="建筑面积:" style="width: 30%" prop="jzmj">
                        <el-input v-model="fjform.jzmj" placeholder="请输入建筑面积" class="search-input"></el-input>
                    </el-form-item>
                    <el-form-item label="房屋性质:" style="width: 30%" prop="fwyt">
                        <el-input v-model="fjform.fwyt" placeholder="请输入房屋性质" class="search-input"></el-input>
                    </el-form-item>
                    <el-form-item label="证书编号:" style="width: 30%" prop="zsbh">
                        <el-input v-model="fjform.zsbh" placeholder="请输入证书编号" class="search-input"></el-input>
                    </el-form-item>
                    <el-form-item label="档案编号:" style="width: 30%" prop="dabh">
                        <el-input v-model="fjform.dabh" placeholder="请输入档案编号" class="search-input"></el-input>
                    </el-form-item>
                    <el-form-item label="产权人:" style="width: 30%" prop="cqr">
                        <el-input v-model="fjform.cqr" placeholder="请输入产权人" class="search-input"></el-input>
                    </el-form-item>
                    <el-form-item label="发证日期:" style="width: 30%" prop="fzrq">
                        <el-date-picker type="date" placeholder="选择发证日期" v-model="fjform.fzrq" style="width: 100%"
                            value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="土地使用权面积:" style="width: 30%" prop="tdsyqmj">
                        <el-input v-model="fjform.tdsyqmj" placeholder="请输入土地使用权面积" class="search-input"></el-input>
                    </el-form-item>
                    <el-form-item label="原值:" style="width: 30%" prop="yz">
                        <el-input v-model="fjform.yz" placeholder="请输入原值" class="search-input"></el-input>
                    </el-form-item>
                    <el-form-item label="总楼层:" style="width: 30%" prop="zlc">
                        <el-input v-model="fjform.zlc" placeholder="请输入总楼层" class="search-input"></el-input>
                    </el-form-item>
                    <el-form-item label="土地使用权类型:" style="width: 30%" prop="tdsyqlx">
                        <el-select v-model="fjform.tdsyqlx" placeholder="请选择土地使用权类型" clearable style="width: 100%">
                            <el-option v-for="item in tdsyqlxlist" :key="item.code" :label="item.name" :value="item.code">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所在层数:" style="width: 30%" prop="szcs">
                        <el-input v-model="fjform.szcs" placeholder="请输入所在层数" class="search-input"></el-input>
                    </el-form-item>
                    <el-form-item label="备注:" style="width: 100%" prop="bz">
                        <el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入备注" v-model="fjform.bz">
                        </el-input>
                    </el-form-item>
                    <!-- 是否支持多文进上传 multiple -->
                    <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'" :on-remove="handleRemoves"
                        :before-remove="beforeRemoves" multiple  :headers="myHeaders"
                        :on-success="handelfilesuccess"
                        :file-list="filefileList">
                        <div class="unloadTitle">附件</div>
                        <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                    </el-upload>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                <el-button @click="addlistval = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { buildadd } from '@/api/index';
import global from '@/components/common/httpurl.vue'
import valueList from '@/components/common/valueList.vue'
export default {
    name: 'addlz',
    data() {
        return {
            fjlrshow: false,
            addlistval: false,
            httpUrl: global.httpUrl,//公共地址
            qslist:valueList.qsList,//区属
            cqdwlist:valueList.cqdwlist,//产权单位
            fwytlist: valueList.fwytlist,//房屋性质
            cblist: valueList.cblist,//产别
            qzlxlist:valueList.qzlxlist,//权证类型
            tdsyqlxlist: valueList.tdsyqlxlist,//土地使用权类型
            sflist: valueList.sflist,//是否列表
            jzxslist: valueList.jzxslist,//建筑形式列表
            fwjglist: valueList.fwjglist,//房屋结构列表
            gfdwlist: valueList.gfdwlist,//管房单位
            filefileList: [],//文件列表
            fileListshandle: [],
            // 请求表头信息
            myHeaders: {
                'token': localStorage.getItem('token')
            },
            form: {
                cb: '',// 产别 ,
                cqdw: '',// 产权单位 ,
                create_name: localStorage.getItem('username'),// 创建人 ,
                create_name_id: localStorage.getItem('userid'),// 创建人id ,
                create_time: '',// 创建时间 ,
                current: null,// 第几页 ,
                dabh: '',// 档案编号 ,
                dscs: '',// 地上层数 ,
                dxcs: '',//地下层数 ,
                fj: '',// 附件 ,
                fmjz: '',// 风貌建筑 ,
                fwdz: '',// 地址 ,
                fwjg: '',// 房屋结构 ,
                fwyt: '',// 房屋性质 ,
                fzrq: '',// 发证日期 ,
                id: '',
                jdrq: '',// 建档日期 ,
                jzmj: '',// 建筑面积 ,
                jznd: '',// 建筑年代 ,
                jzxs: '',// 建筑形式 ,
                note: '',//备注 ,
                pageSize: null,
                qs: '',// 区属 ,
                qzlx: '',// 权证类型 ,
                status_code: '1',// 1正常 2删除 ,
                tdsyqlx: '',// 土地使用权类型 ,
                tdsyqmj: '',// 土地使用权面积 ,
                update_name: '',// 修改人 ,
                update_name_id: '',// 修改人id ,
                update_time: '',// 修改时间 ,
                yz: '',// 原值 ,
                zlc: '',// 总楼层 ,
                zsbh: '',// 证书编号 ,
                zsxyl: '',// 招商小洋楼
                lh:'',//楼号
                jizumj:'',//计租面积
                gfdw:this.$store.getters.gfdw,//
            },
            fjform:{},//房间表单
            fileList: [],
            rules: {
                name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
                address: [{ required: true, message: '请输入项目地址', trigger: 'blur' }],
                beginTime: [{ type: 'date', required: true, message: '请选择开工时间', trigger: 'change' }],
                completionTime: [{ type: 'date', required: true, message: '请选择计划竣工时间', trigger: 'change' }],

                chargenameB: [{ required: true, message: '请输入乙方负责人', trigger: 'blur' }],
                phoneB: [
                    { required: true, message: '请输入乙方负责人电话', trigger: 'blur' },
                    // { type: 'number', message: '电话必须为数字值'}
                ],
                company: [{ required: true, message: '请输入乙方公司名称', trigger: 'blur' }],
                chargenameA: [{ required: true, message: '请输入甲方项目负责人', trigger: 'blur' }],
                phoneA: [
                    { required: true, message: '请输入甲方负责人电话', trigger: 'blur' },
                    // { type: 'number', message: '电话必须为数字值'}
                ]
            },
            type:this.$store.getters.type
        };
    },
    methods: {
        // 创建
        submitForm() {
            // this.fjlrshow = true
            console.log(this.form)
            buildadd(this.form).then((res) => {
                if (res.code == 200) {
                    this.$message.success('新增楼幢成功');
                    this.$router.go(-1);
                    // this.$router.push({
                    //     name: 'dashboard',
                    //     path: '/dashboard'
                    // });
                } else {
                    this.$message.error('新增楼幢失败失败');
                }
            });
            console.log('提交确定');
        },
        // 取消
        cacelsubmitForm() {
            this.$router.go(-1);
        },
        // 文件
        handleRemoves(file, fileList) {
            console.log(fileList)
            this.fileListshandle = fileList.map((res) => {
                return res.response.data.id;
            });
            this.form.fj = this.fileListshandle.toString()

        },
        // 文件删除前
        beforeRemoves(file, fileList) {
            console.log(file)
            console.log(fileList)
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 上传成功
        handelfilesuccess(response, file, fileLists) {
            console.log(fileLists)
            console.log(file)
            this.$message.success('导入成功');
            this.fileListshandle = fileLists.map((res) => {
                console.log(res.response.data)
                return res.response.data.id;
            });
            this.form.fj = this.fileListshandle.toString()
        }
    },
    created() {
        console.log(global.httpUrl)
    }
};
</script>
<style>
.el-upload-list {
    width: 60%;
}

.el-upload--text {
    width: auto;
    height: 80px;
    overflow: hidden;
    border: none;
}
</style>
<style scoped>
.container {
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentbox {
    display: flex;
    justify-content: space-between;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    color: #606266;
}

.handle-box {
    overflow: hidden;
}

.addtitle {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.buttonCenter {
    width: 12%;
    margin: auto;
}

.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

/* 搜索按钮 */
.searchcolor {
    background-color: #7090ff;
}
</style>
<style></style>